import React, { Component } from "react";
import { Carousel, Icon, Modal, Spin } from "antd";
import "styles/home/advertisement.scss";
import dashboardService from "containers/dashboard/dashboard.service";
import DefaultBanner from "images/dashboard/default-banner.jpg";
import "styles/dashboard/dashboard-carousel.scss";
import moment from "moment";
import { eventTrack } from "share/common";

class DashboardCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carousels: [],
    };
  }

  componentWillMount() {}

  componentDidMount() {
    this.getCarouselsByCompany();
  }

  componentWillUnmount() {}

  //获取轮播图数据
  getCarouselsByCompany = () => {
    const { companyOID } = this.props.loginUser;
    const banner_list = [];
    this.setState({ loading: true });
    dashboardService
      .getCarouselsByCompany(companyOID)
      .then((res) => {
        if (res.data.length > 0) {
          res.data.map((item, index) => {
            if (!!item.enable === true) {
              const carouselInfo = {
                url: "",
                carouselOID: item.carouselOID,
                imgSrc: item.attachmentDTO && item.attachmentDTO.link,
                title: item.title,
                outLink: item.outLink,
              };
              banner_list.push(carouselInfo);
            }
          });
        } else {
          banner_list.push({
            url: "",
            carouselOID: "",
            imgSrc: DefaultBanner,
            title: "",
          });
        }
      })
      .then(() => {
        banner_list.map((item, index) => {
          if (item.outLink && item.carouselOID) {
            dashboardService.getCarouselByID(item.carouselOID).then((res) => {
              if (res.status === 200) {
                item.outLinkUrl = res.data.firstOutLink;
                this.setState({ carousels: banner_list });
              }
            });
          }
        });
        this.setState(
          {
            carousels: banner_list,
            loading: false,
          },
          () => {
            this.carouselRef && this.carouselRef.innerSlider.slickGoTo(0, true);
          }
        );
      });
  };

  // 公告详情，模态框展示或跳转链接
  goCarouselDetail = (item) => {
    if (item.carouselOID) {
      if (item.outLinkUrl) {
        window.open(item.outLinkUrl, "_blank");
      } else {
        dashboardService.getCarouselByID(item.carouselOID).then((res) => {
          if (res.status === 200) {
            item.content = res.data.content;
            item.localDate = moment(res.data.createdDate).format("YYYY-MM-DD");
            Modal.info({
              className: "announcement-box",
              width: 760,
              title: item.title,
              content: (
                <div className="carousel-modal">
                  <div dangerouslySetInnerHTML={{ __html: item.content }} />
                </div>
              ),
            });
          }
        });
      }
      eventTrack({
        category: "1218-新首页-埋点",
        action: `点击【企业公告】`,
        label: this.props.tenant.tenantName,
      });
    }
  };

  render() {
    const { carousels, loading } = this.state;
    const { uniKey, enableDrag } = this.props;
    return (
      <div id={`home-${uniKey}`} data-id={`home-${uniKey}`} className="ad-box dashboard-carousel one-third-width">
        <Spin spinning={loading}>
          <div className="out-loading-box">
            {!loading && (
              <Carousel
                ref={(ref) => (this.carouselRef = ref)}
                dots
                arrows
                autoplay={carousels.length > 1}
                prevArrow={<Icon type="left" />}
                nextArrow={<Icon type="right" />}
              >
                {carousels.map((item) => {
                  return (
                    <div
                      className="single-carousel allow-click"
                      onClick={() => this.goCarouselDetail(item)}
                      style={{ backgroundImage: `url('${item.imgSrc || DefaultBanner}')` }}
                    >
                      {item.title && (
                        <div className="carousel-title" style={{ bottom: 0 }}>
                          {item.title}
                        </div>
                      )}
                    </div>
                  );
                })}
              </Carousel>
            )}
          </div>
          {enableDrag && <div className="toggle-drag-box" />}
        </Spin>
      </div>
    );
  }
}

DashboardCarousel.propTypes = {};

export default DashboardCarousel;
